<template>
  <div class="rank">
    <div class="top">
      <div class="l">
        <div class="icon" @click="goBack()">
          <i class="iconfont icon-xiangzuo"></i>
        </div>
      </div>
      <ul class="r">
        <li
          :class="item.select ? 'active' : ''"
          v-for="(item, index) in catelist"
          :key="index"
          @click="changeNav(item, index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="bottom">
      <div class="l">
        <ul>
          <li
            :class="t.select ? 'active' : ''"
            v-for="(t, i) in subNavis"
            :key="i"
            @click="changeSubNav(t)"
          >
            <span>{{ t.name }}</span>
          </li>
        </ul>
      </div>
      <div class="r">
        <Loading v-show="$store.state.isLoading" />
        <div v-show="!$store.state.isLoading">
          <van-empty description="没有书本哦" v-if="isEmpty" />
          <ul v-else>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <li v-for="(k, v) in rankList" :key="v" @click="gotoDetail(k.id)">
                <div class="l">
                  <img v-lazy="k.cover" alt="" />
                </div>
                <div class="r">
                  <div class="title">{{ k.title }}</div>
                  <div class="content">{{ k.content }}</div>
                  <div class="author">{{ k.author }} |{{ k.category }}</div>
                </div>
              </li>
            </van-list>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRankData, getRankList } from "@/request/api";
export default {
  data() {
    return {
      isLoading: true,
      isEmpty: false,
      catelist: [],
      subNavis: [],

      all: 0,
      rankList: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    //前往详情页
    gotoDetail(id) {
      this.$router.push("/detail?sourceUuid=" + id);
    },
    //返回
    goBack() {
      this.$router.go(-1);
    },
    //滚动加载
    onLoad() {
      this.all += 20;
      let url = `/store/rankList.json?rankType=${this.$route.query.rankType}&uuid=${this.$route.query.uuid}&all=${this.all}`;
      this.getRankList(url);
    },
    //二级菜单切换
    changeSubNav(obj) {
      this.subNavis.map((v) => {
        v.select = false;
      });
      obj.select = true;
      this.rankList = [];
      this.getRankList(obj.url);
    },
    //一级菜单切换
    changeNav(obj, index) {
      this.catelist.map((v) => (v.select = false));
      obj.select = true;
      this.handleSubNav(index);
      let bool = this.subNavis.some((v) => v.select);
      if (!bool) this.subNavis[0].select = true;
      this.rankList = [];
      this.getRankList(this.subNavis[0].url);
    },

    getRankList(url) {
      getRankList(url)
        .then((res2) => {
          if (res2.list.length <= 0 || res2.list == undefined) {
            this.finished = true;
            this.isEmpty = true;
          }
          this.isLoading = false;
          this.rankList = [...this.rankList, ...res2.list];
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //整理二级菜单
    handleSubNav(index) {
      this.subNavis = [];
      let arr = this.catelist[index].subNavis;
      let arr2 = [];
      arr.map((v) => {
        let obj = {
          name: v.name,
          select: v.select,
          url: v.naviInfos[0].url,
        };
        arr2.push(obj);
      });
      this.subNavis = arr2;
    },
    async getRankCate(uuid, rankType) {
      let { data: res } = await getRankData({
        rankType: rankType,
        uuid: uuid,
      });
      this.catelist = res.list;
      let index = this.catelist.findIndex((v) => v.select);
      this.handleSubNav(index);
    },
  },
  activated() {
    this.getRankCate(this.$route.query.uuid, this.$route.query.rankType);
    let url = `/store/rankList.json?rankType=${this.$route.query.rankType}&uuid=${this.$route.query.uuid}`;
    this.getRankList(url);
  },
};
</script>

<style lang="scss" scoped>
.rank {
  padding: 0 10px;
  font-size: 18px;
  .top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    background-color: #fff;
    > .l {
      width: 25%;
      line-height: 50px;
      text-align: left;
      margin-left: 10px;
    }
    > .r {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        position: relative;
        color: #888;
      }
      .active {
        font-size: 22px;
        color: #000;
        &::after {
          position: absolute;
          bottom: -30%;
          left: 20%;
          content: "";
          display: block;
          width: 20px;
          height: 3px;
          border-radius: 3px;
          background-color: #e64d2e;
        }
      }
    }
  }
  .bottom {
    display: flex;
    width: 100%;
    > .l {
      position: fixed;
      top: 50px;
      left: 0;
      width: 100px;
      height: calc(100vh - 50px);
      background-color: #fff;
      li {
        padding: 20px 0;
        border-right: 1px solid #eee;
        position: relative;
        span {
          display: block;
          width: 100%;
        }
      }
      .active {
        span {
          color: #e64d2e;
        }
        &::after {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 999;
          width: 4px;
          height: 16px;
          background-color: #e64d2e;
        }
      }
    }
    > .r {
      flex: 1;
      width: calc(100% - 130px);
      height: calc(100vh - 50px);
      padding-top: 50px;
      margin-left: 22%;
      ::v-deep .van-list {
        width: 100%;
        padding: 0;
        margin: 0;
      }
      ul {
      }
      li {
        display: flex;
        height: 100px;
        padding: 10px;
        box-sizing: border-box;
      }
      .l {
        width: 20%;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .r {
        flex: 1;
        text-align: left;
        color: #888;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 10px;
        .title {
          font-size: 18px;
          color: #000;
        }
        .content {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
